<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="application application-offset">
        <div class="container-fluid container-application">
          <div class="sidenav show" id="sidenav-main">
            <!-- Sidenav header -->
            <div class="sidenav-header d-flex align-items-center">
              <a class="navbar-brand" href="./index.html">
                <span class="logo">·ITCAST·</span>
              </a>
            </div>
            <!-- User mini profile -->
            <div
              class="
                sidenav-user
                d-flex
                flex-column
                align-items-center
                justify-content-between
                text-center
              "
            >
              <!-- Avatar -->
              <div>
                <a href="#" class="avatar rounded-circle avatar-xl">
                  <img
                    alt="Image placeholder"
                    src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
                    class=""
                  />
                </a>
                <div class="mt-5">
                  <h5 class="mb-0 text-white">xx前端</h5>
                  <span class="d-block text-sm text-white opacity-8 mb-3"
                    >数据可视化</span
                  >
                  <a
                    href="javascript:;"
                    class="
                      btn btn-sm btn-white btn-icon
                      rounded-pill
                      shadow
                      hover-translate-y-n3
                    "
                  >
                    <span class="btn-inner--text">学前端来xxx</span>
                  </a>
                </div>
              </div>
            </div>
            <!-- Application nav -->
            <div class="nav-application clearfix">
              <a href="./index.html" class="btn btn-square text-sm">
                <span class="btn-inner--icon d-block"
                  ><i class="bi bi-house bi-2x"></i
                ></span>
                <span class="btn-inner--icon d-block pt-2">首页</span>
              </a>
              <a href="./student.html" class="btn btn-square text-sm active">
                <span class="btn-inner--icon d-block"
                  ><i class="bi bi-people bi-2x"></i
                ></span>
                <span class="btn-inner--icon d-block pt-2">学生</span>
              </a>
              <a href="javascript:;" class="btn btn-square text-sm">
                <span class="btn-inner--icon d-block"
                  ><i class="bi bi-columns bi-2x"></i
                ></span>
                <span class="btn-inner--icon d-block pt-2">排版</span>
              </a>
              <a href="javascript:;" class="btn btn-square text-sm">
                <span class="btn-inner--icon d-block"
                  ><i class="bi bi-files bi-2x"></i
                ></span>
                <span class="btn-inner--icon d-block pt-2">资料</span>
              </a>
              <a href="javascript:;" class="btn btn-square text-sm">
                <span class="btn-inner--icon d-block"
                  ><i class="bi bi-receipt bi-2x"></i
                ></span>
                <span class="btn-inner--icon d-block pt-2">就业</span>
              </a>
              <a href="javascript:;" class="btn btn-square text-sm">
                <span class="btn-inner--icon d-block"
                  ><i class="bi bi-gear bi-2x"></i
                ></span>
                <span class="btn-inner--icon d-block pt-2">设置</span>
              </a>
            </div>
            <!-- Misc area -->
            <div class="card bg-gradient-warning">
              <div class="card-body">
                <h5 class="text-white">哈喽, 朋友!</h5>
                <p class="text-white mb-4">
                  为什么不现在开始学习前端，创造一些令人惊叹的东西呢？
                </p>
                <a
                  href="http://itcast.cn"
                  class="btn btn-sm btn-block btn-white rounded-pill"
                  target="_blank"
                  >Get started</a
                >
              </div>
            </div>
          </div>
          <div class="main-content position-relative">
            <nav
              class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border"
              id="navbar-main"
            >
              <div class="container-fluid">
                <!-- Navbar nav -->
                <div
                  class="collapse navbar-collapse navbar-collapse-fade"
                  id="navbar-main-collapse"
                >
                  <ul class="navbar-nav align-items-lg-center">
                    <!-- Home  -->
                    <li class="nav-item">
                      <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link pl-lg-0" href="./index.html"> xx教育 </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link pl-lg-0" href="./index.html"> 程序员 </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
                    </li>
                  </ul>
                  <!-- Right menu -->
                  <ul
                    class="
                      navbar-nav
                      ml-lg-auto
                      align-items-center
                      d-none d-lg-flex
                    "
                  >
                    <li class="nav-item dropdown dropdown-animate">
                      <a
                        class="nav-link pr-lg-0"
                        href="javascript:;"
                        role="button"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        <div class="media media-pill align-items-center">
                          <span class="avatar rounded-circle">
                            <img
                              alt="Image placeholder"
                              src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
                            />
                          </span>
                          <div class="ml-2 d-none d-lg-block">
                            <span id="user" class="mb-0 text-sm font-weight-bold">Admin</span>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link pl-lg-0" id="logout" href="javascript:;">
                        退出
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
            <div class="page-content">
                 <!-- Page Title -->
          <div class="page-title">
            <div class="row justify-content-between align-items-center">
              <div class="col-md-6 mb-3 mb-md-0">
                <h5 class="h3 font-weight-400 mb-0 text-white">Dashboard</h5>
                <span class="text-sm text-white opacity-8">前端 2202A</span>
              </div>
            </div>
          </div>
          <!-- charts -->
          <div class="row">
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">就业薪资</h6>
                      <span name="salary" class="salary" class="h3 font-weight-bold mb-0 ">15500</span>
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-coin"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">班级人数</h6>
                      <span name="student_count" class="student_count" class="h3 font-weight-bold mb-0 ">80</span>
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-people"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">平均年龄</h6>
                      <span class="age" name="age" class="h3 font-weight-bold mb-0 ">24.40</span>
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-calendar2-week"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <!-- Card body -->
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">小组个数</h6>
                      <span name="group_count" class="group_count" class="h3 font-weight-bold mb-0 ">8</span>
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-collection"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col col-xl-8">
              <div class="card" id="line" style="height: 400px;"></div>
            </div>
            <div class="col col-xl-4">
              <div class="card" id="salary" style="height: 400px;"></div>
            </div>
            <div class="col col-xl-12">
              <div class="card" style="height: 400px;">
                <div class="card-header">
                  <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">班级每组薪资</h6>
                    <div id="btns">
                      <button type="button" class="btn btn-xs btn-blue">1</button>
                      <button type="button" class="btn btn-xs ">2</button>
                      <button type="button" class="btn btn-xs ">3</button>
                      <button type="button" class="btn btn-xs ">4</button>
                      <button type="button" class="btn btn-xs ">5</button>
                      <button type="button" class="btn btn-xs ">6</button>
                      <button type="button" class="btn btn-xs ">7</button>
                      <button type="button" class="btn btn-xs ">8</button>
                    </div>
                  </div>
                </div>
                <div class="card-body p-0" id="lines"></div>
              </div>
            </div>
            <div class="col col-xl-4">
              <div class="card" id="gender" style="height: 500px;"></div>
            </div>
            <div class="col col-xl-8">
              <div class="card" id="map" style="height: 500px;"></div>
            </div>
          </div>

              <!-- footer -->
              <div class="footer pt-5 pb-4 footer-light" id="footer-main">
                <div class="row text-center text-sm-left align-items-sm-center">
                  <div class="col-sm-6">
                    <p class="text-sm mb-0">
                      © 2022
                      <a href="https://itcast.cn" class="h6 text-sm" target="_blank"
                        >前端学科</a
                      >. All rights reserved.
                    </p>
                  </div>
                  <div class="col-sm-6 mb-md-0">
                    <ul class="nav justify-content-center justify-content-md-end">
                      <li class="nav-item">
                        <a class="nav-link" href="#">Support</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Terms</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link pr-0" href="#">Privacy</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- add Modal -->
        <div class="modal fade" id="modal">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <!-- 当具体点击到添加或修改时，这个标题随机应变 -->
                <h5 class="modal-title">某标题</h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <form id="form" class="g-3 row" autocomplete="off" novalidate>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="input-group-label">姓名：</label>
                      <input
                        type="text"
                        name="name"
                        class="form-control"
                        placeholder="请输入姓名"
                      />
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="input-group-label">性别：</label>
                      <div class="input">
                        <div class="form-check d-inline-block">
                          <input
                            value="0"
                            checked
                            id="cb01"
                            class="form-check-input"
                            type="radio"
                            name="gender"
                          />
                          <label for="cb01" class="form-check-label">男</label>
                        </div>
                        <div class="form-check d-inline-block">
                          <input
                            value="1"
                            id="cb02"
                            class="form-check-input"
                            type="radio"
                            name="gender"
                          />
                          <label for="cb02" class="form-check-label">女</label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="input-group-label">年龄：</label>
                      <input
                        type="text"
                        name="age"
                        class="form-control"
                        placeholder="请输入年龄"
                      />
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="input-group-label">组号：</label>
                      <input
                        type="text"
                        name="group"
                        class="form-control"
                        placeholder="请输入1-8组号"
                      />
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="input-group-label">期望薪资：</label>
                      <input
                        type="text"
                        name="hope_salary"
                        class="form-control"
                        placeholder="请输入期望薪资"
                      />
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="input-group-label">就业薪资：</label>
                      <input
                        type="text"
                        name="salary"
                        class="form-control"
                        placeholder="请输入就业薪资"
                      />
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group">
                      <label class="input-group-label">籍贯：</label>
                      <div class="input pl-0">
                        <select class="form-select custom-select" name="province">
                          <option value="">--省份--</option>
                        </select>
                        <select class="form-select custom-select" name="city">
                          <option value="">--城市--</option>
                        </select>
                        <select class="form-select custom-select" name="area">
                          <option value="">--地区--</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  取消
                </button>
                <button type="button" class="btn btn-blue" id="submit">确认</button>
              </div>
            </div>
          </div>
        </div>
         <!-- toast -->
         <div class="position-fixed top-0 start-50 pt-4" style="z-index: 999; transform: translateX(-50%)">
          <div id="myToast" class="toast bg-rgba">
            <div class="toast-body">提示消息</div>
          </div>
        </div>
      </div>

      <script src="./js/bootstrap.min.js"></script>
      <script src="./js/axios.min.js"></script>
      <script src="./js/form-serialize.js"></script>
      <script src="./js/common.js"></script>
      <script src="./js/echarts.min.js"></script>
      <script src="./js/index.js"></script>
      <script src="./js/china.js"></script>


</body>
</html>